<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    {% include "/include/headinclude.html" %}
<link href="/static/res/lib/highlight/styles/default.css" rel="stylesheet">
<script src="/static/res/lib/highlight/highlight.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body style="padding-top: 70px; ">
   {% include "/include/headnav.html" %}
   <!--主框架开始 -->
   <div class="container">
       <!--行式布局 -->
      <div class="row">
             <!--左边栏开始 -->
        <div class="col-xs-4 col-md-3 bg-info">
            {% include "/include/leftnav.html" %}
        </div>
             <!--左边栏结束 -->
          <!--主界面开始 -->
        <div class="col-xs-8 col-md-9">
            <h1 class="page-header">命令执行</h1>
            <div class="panel  panel-primary">
              <!--文件传输页面开始 -->
               <div class="row">
                    <!-- 内容列表及课程介绍 -->
                    <div class="col-md-5">
                        <div class="panel panel-primary">
                            <div class="panel-heading">主机列表</div>
                             <div class="panel-body">
                                 <select multiple class="form-control" id="leftselect">
                                      {% for item in hostlist %}
                                          <option name="{{ item.ip }}" value="{{item.ip}}">{{item.ip}}</option>
                                      {% endfor %}
                                  </select>
                             </div>
                        </div>
                    </div>
                   <div class="col-md-2" style="text-align:center;vertical-align: middle"><br /><br /><br />
                        <button type="button" class="btn btn-success" id="btn_transfer">执行</button>
                        <button type="button" class="btn btn-success" id="btn_addserver">添加主机</button>
                   </div>
                    <div class="col-md-5">
                        <div class="panel panel-info">
                            <div class="panel-heading">待执行的主机</div>
                             <div class="panel-body" >
                                  <select multiple class="form-control" id="rightselect">
                                  </select>
                             </div>
                        </div>
                    </div>
               </div>
                <form class="form-inline">
                    <div class="input-group input-group-lg">
                      <span class="input-group-addon" id="sizing-addon2">服务器命令：</span>
                      <input type="text" class="form-control" id="remote_command" name="remote_command" placeholder="服务器命令" aria-describedby="sizing-addon1">
                   </div>
                    <div class="input-group">
                        <button type="button" class="btn btn-info" id="btn_searchcommand" data-toggle="modal" data-target="#myModal">命令检索</button>
                    </div>
                </form>
            </div>


            <!-- Modal -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">运维主机工具集</h4>
                      <input type="hidden" id="seleccommand" />
                  </div>
                  <div class="modal-body">
                         <!-- Nav tabs -->
                          <ul class="nav nav-tabs  nav-justified" role="tablist">
                            <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">文件类</a></li>
                            <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">查询类</a></li>
                            <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">运维类</a></li>
                            <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">网络类</a></li>
                          </ul>

                          <!-- Tab panes -->
                          <div class="tab-content" id="commandSearch">
                            <div role="tabpanel" class="tab-pane active" id="home">
                                <div class="row">
                                      <div class="col-xs-6 col-sm-4"> <a href="#" class="thumbnail">
                                              <img src="..." alt="...">
                                            </a>
                                          </div>
                                      <div class="col-xs-6 col-sm-4">
                                           <a href="#" class="thumbnail">
                                              <img src="..." alt="...">
                                            </a>
                                      </div>
                                      <div class="col-xs-6 col-sm-4">
                                           <a href="#" class="thumbnail" data-content="ls -ltr" onclick="commandSearch(this)">
                                               <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                                            </a>
                                      </div>
                                      <div class="col-xs-6 col-sm-4">
                                           <a href="#" class="thumbnail">
                                              <img src="..." alt="...">
                                            </a>
                                      </div>
                                </div>
                            </div>
                            <div role="tabpanel" class="tab-pane" id="profile"></div>
                            <div role="tabpanel" class="tab-pane" id="messages">
                                <div class="row">
                                      <div class="col-xs-6 col-sm-4"> <a href="#" class="thumbnail">
                                              <img src="..." alt="...">
                                            </a>
                                          </div>
                                      <div class="col-xs-6 col-sm-4">
                                           <a href="#" class="thumbnail">
                                              <img src="..." alt="...">
                                            </a>
                                      </div>
                                      <div class="col-xs-6 col-sm-4">
                                           <a href="#" class="thumbnail" data-content="sh svnmanager.sh" onclick="commandSearch(this)">
                                              <span class="glyphicon glyphicon-expand img-circle" aria-hidden="true"></span>svn管理
                                            </a>
                                      </div>
                                      <div class="col-xs-6 col-sm-4">
                                           <a href="#" class="thumbnail">
                                              <img src="..." alt="...">
                                            </a>
                                      </div>
                                </div>
                            </div>
                            <div role="tabpanel" class="tab-pane" id="settings"></div>
                          </div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>


            <hr class="featurette-divider">
            <h3 class="page-header">执行结果</h3>
            <div class="panel  panel-primary">
              <!-- Default panel contents -->
              <!-- Table -->
                <div  class="panel-body">
                    <pre><code id="resultspan" class="shell"></code></pre>
                </div>
                </div>
                <!--整体浏览界面 -->
            <!--整体浏览界面 -->

        </div>
          <!--主内容布局结束 -->
      </div>
       <!--行式布局结束 -->
   </div>
   <!--主框架结束 -->
{% include "/include/buttom.html" %}
<script type="text/javascript" src="/static/res/js/commandexecute.js"></script>

</body>
</html>